{% extends "base.html" %}

{% block title %}首页 - 知识图谱系统{% endblock %}

{% block content %}
<!--<div class="hero-section bg-gradient text-white py-5">-->
<!--    <div class="container">-->
<!--        <div class="row align-items-center">-->
<!--            <div class="col-lg-6">-->
<!--                <h1 class="display-4 fw-bold mb-4" style="color: #222;">-->
<!--                    <i class="fas fa-project-diagram me-3 " style="color: #222;"></i>-->
<!--                    智能知识图谱系统-->
<!--                </h1>-->
<!--                <p class="lead mb-4" style="color: #222;">-->
<!--                    功能强大的知识图谱可视化平台，支持Excel和JSON文件导入，-->
<!--                    提供交互式力导向图可视化，智能搜索和AI驱动的知识问答。-->
<!--                </p>-->
<!--                <div class="d-flex gap-3">-->
<!--                    <a href="{{ url_for('register') }}" class="btn btn-light btn-lg">-->
<!--                        <i class="fas fa-user-plus me-2"></i>立即注册-->
<!--                    </a>-->
<!--                    <a href="{{ url_for('login') }}" class="btn btn-light btn-lg">-->
<!--                        <i class="fas fa-sign-in-alt me-2"></i>用户登录-->
<!--                    </a>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="col-lg-6">-->
<!--                <div class="text-center">-->
<!--                    <i class="fas fa-network-wired display-1 opacity-75"></i>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="container py-5">
    <div class="row">
        <div class="col-12 text-center mb-5">
            <h2 class="h1 mb-3">核心功能特性</h2>
            <p class="lead text-muted">为您提供全方位的知识图谱管理和可视化解决方案</p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-eye fa-3x text-primary"></i>
                    </div>
                    <h5 class="card-title">交互式可视化</h5>
                    <p class="card-text text-muted">
                        力导向图布局，支持节点拖拽、缩放操作，
                        多色彩分组显示，响应式设计支持移动端
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-file-import fa-3x text-success"></i>
                    </div>
                    <h5 class="card-title">多格式支持</h5>
                    <p class="card-text text-muted">
                        支持Excel、CSV、JSON文件导入，
                        自动解析数据关系，生成知识图谱
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-search fa-3x text-info"></i>
                    </div>
                    <h5 class="card-title">智能搜索</h5>
                    <p class="card-text text-muted">
                        实时搜索和高亮显示，支持节点筛选，
                        可调节力导向图强度，重置视图功能
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-brain fa-3x text-warning"></i>
                    </div>
                    <h5 class="card-title">AI智能问答</h5>
                    <p class="card-text text-muted">
                        点击节点获取AI生成的详细信息，
                        自动生成测试题目，智能知识问答
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-users fa-3x text-danger"></i>
                    </div>
                    <h5 class="card-title">多用户管理</h5>
                    <p class="card-text text-muted">
                        用户注册登录系统，支持公开/私有图谱，
                        管理员权限管理，安全可靠
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center p-4">
                    <div class="feature-icon mb-3">
                        <i class="fas fa-download fa-3x text-secondary"></i>
                    </div>
                    <h5 class="card-title">导出下载</h5>
                    <p class="card-text text-muted">
                        支持PNG/JPG格式图片导出，
                        高清晰度输出，便于分享和展示
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-light py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h3 class="mb-4">开始使用知识图谱系统</h3>
                <p class="lead mb-4">
                    立即注册账户，开始构建您的专属知识图谱
                </p>
                <a href="{{ url_for('register') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-rocket me-2"></i>立即开始
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block head %}
<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.feature-icon {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-5px);
}
</style>
{% endblock %}